<template>
  <el-menu
      :default-active="activePath"
      class="sidebar"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
  >
    <el-menu-item index="/home" @click="goto('/home')">
      <el-icon><HomeFilled /></el-icon>
      <span>首页</span>
    </el-menu-item>

    <!-- 用户管理 -->
    <el-menu-item index="/user-manage" @click="goto('/user-manage')">
      <el-icon><User /></el-icon>
      <span>用户管理</span>
    </el-menu-item>

    <!-- 医生管理 -->
    <el-menu-item index="/doctor-manage" @click="goto('/doctor-manage')">
      <el-icon><Avatar /></el-icon>
      <span>医生管理</span>
    </el-menu-item>

    <!-- 科室管理 -->
    <el-menu-item index="/department-manage" @click="goto('/department-manage')">
      <el-icon><Memo /></el-icon>
      <span>科室管理</span>
    </el-menu-item>

    <!-- 管理员管理 -->
    <el-menu-item index="/admin-manage" @click="goto('/admin-manage')">
      <el-icon><Lock /></el-icon>
      <span>管理员管理</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import {Avatar, HomeFilled, Lock, Memo, User} from "@element-plus/icons-vue";
import {ref} from "vue";

const router = useRouter();
const route = useRoute();
const activePath = ref(route.path);

const goto = (path) => {
  router.push(path);
  activePath.value = path;
};
</script>

<style scoped>
.sidebar {
  height: 100%;
  width: 200px;
}
</style>
